<template>

    
    <dv-border-box11 class="left-top" title="办结统计" 
        :animate="true">
        <div class="left-top-box1">
            <ul>
                <li v-for="(item, index) in completion" :key="index">
                    <i class="box1-icon" :class="item.icon"></i>
                    <span class="box1-name">{{ item.name }}</span>
                    <span class="box1-value">:{{ item.value }}</span>
                </li>

            </ul>
        </div>
        <div class="left-top-box2">
            <dv-charts :option="option" style="width:100%;height:100%">

            </dv-charts>
        </div>
    </dv-border-box11>


</template>
<script setup>
const completion = ref([
    { name: '今日受理', value: '12', icon: '' },
    { name: '今日受理', value: '12', icon: '' },
    { name: '今日受理', value: '12', icon: '' },
    { name: '今日受理', value: '12', icon: '' },
    { name: '今日受理', value: '12', icon: '' },
    { name: '今日受理', value: '12', icon: '' }
])

const option = ref({
    title: {
        text: "统计大厅办件量",
        style: {
            fill: '#fff',
            fontSize: 12
        }
    },
    xAxis: {
        name: "第一周",
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
        //针对的是x轴与y轴上面的字体颜色
        axisLabel: {
            style: {
                fill: '#fff'
            }
        },
        //针对的是x轴与y轴的线
        axisLine: {
            style: {
                stroke: '#fff'
            }
        },
        //x轴上的刻度线
        axisTick: {
            style: {
                stroke: '#fff'
            }
        },
        splitLine: {
            show: false
        }
    },
    yAxis: {
        name: "销售额",
        data: 'value',
        min: 0,
        max: 100,
        axisLabel: {
            style: {
                fill: '#fff'
            }
        }, axisLine: {
            style: {
                stroke: '#fff'
            }
        }
    },
    series: [
        {
            data: [44, 59, 36, 58, 21, 44, 12],
            type: 'line',
            smooth: true
        }
    ]
})
</script>

<style scoped>
.left-top {
   width:100%;
   height: 330px;
}

.left-top-box1 {

    height: 120px;
}

.left-top-box1 ul {
    display: flex;
    flex-wrap: wrap;
    padding-top: 70px;
    font-size: 12px;
    margin: 0 20px;
}

.left-top-box1 ul li {
    width: 33.3%;
    margin: 5px 0;
}

.left-top-box1 ul li i {
    margin-right: 5px;
}

.box1-value {
    color: #00D9E6
}

.left-top-box2 {

    height: 210px;
}
</style>